<template>
  <div class="project-permission">
    <el-card>
      <!-- 标题头 -->
      <div slot="header">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 18px;
            padding-bottom: 5px;
          "
        >
          <img
            src="@/assets/img/tuanduihuizong.png"
            style="height: 17px; margin-right: 5px"
          />
          绑定项目
        </span>
         <div class="xhxBox"></div>
      </div>
      <div class="form" style="margin-top: 2%">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
        >
          <el-col :span="15">
            <el-form-item label="用户组名称" prop="userName">
              <el-input
                v-model.trim="formData.userName"
                placeholder="请输入用户组名称"
                clearable
               :disabled="inputShow"
                maxlength="10"
                style="width: 200px"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15" style="border-bottom: 1px #eee solid">
            <el-form-item label="绑定项目" prop="addUser">
              <!--  -->
              <el-input v-model="inputValue" style="width: 200px">
                <el-button
                  style="padding-right: 10px"
                  slot="prefix"
                  type="text"
                  @click="getProjectButton"
                >
                  <span style="border-bottom: 1px solid; color: #467ef7"
                    ><i class="el-icon-plus"></i>绑定项目</span
                  >
                </el-button>
              </el-input>

              <div class="group">
                <div
                  v-for="tag in dynamicTags"
                  :key="tag.proId"
                  class="group-item"
                >
                  {{ tag.proName
                  }}<i
                    class="el-icon-close"
                    style="
                      margin-left: 5px;
                      margin-top: 2px;
                      font-weight: bold;
                      cursor: pointer;
                    "
                    :disable-transitions="false"
                    @click="handleClose(tag)"
                  ></i>
                </div>
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="24" style="margin-top: 40px">
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm" style="width: 110px"
                >提 交</el-button
              >
              <!-- <el-button @click="resetForm">重置</el-button> -->
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <!-- 项目 -->
      <el-dialog :visible.sync="drawer" title="绑定项目" width="660px" center>
        <!--表格-->
        <div>
          <div style="display:flex;justify-content:flex-end;">
             <el-button
                type="primary"
                icon="el-icon-plus"
                @click="toggleSelection"
                >添加</el-button
              >
          </div>
           
          <!--  -->
          <el-table
            :data="tableData"
            style="width: 100%;margin-top:10px"
            height="300px"
            @selection-change="checkShow"
             :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
          >
            <el-table-column type="selection" width="55" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.three"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="proName"
              label="项目名称"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="four"
              label="类型"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.four }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--  -->
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  selectUserGroupRelaList,
  addUserGroup,
  updateUserGroup,
  selectProjectByUserId,
  addProjectByUserGroup,
} from "@/api/base/index.js";
import { listAPI } from "@/api/projectManagement/index.js";
export default {
  components: {},
  props: [],
  data() {
    return {
      //用户组名称是否禁用
      inputShow:0,
      //标题名称
      headName: "",
      // 是否全选
      checkBox: 0,
      // 添加的人数数据
      dynamicTags: [
        // { name: "王二蛋" }
      ],
      // 表格选中取消人员的暂存数据
      multipleSelection: [],
      inputVisible: false,
      inputValue: "",
      // 弹窗用户名称数据
      tableData: [
        {
          date: "11",
          id: 1,
          name: "王二狗",
          address: "axcvxcvxcvcxvxcxvsd",
          code: true,
        },
        {
          id: 2,
          date: "14",
          name: "赵建设",
          address: "qwe",
          code: false,
        },
        {
          id: 3,
          date: "235234",
          name: "常国庆",
          address: "rhtyr",
          code: false,
        },
        {
          id: 4,
          date: "3456345",
          name: "李秀芹",
          address: "egre",
          code: true,
        },
      ],
      // 弹窗搜索数据
      queryParams: {
        nickName: "",
        userName: "",
      },
      // 弹窗搜索数据
      queryParams1: {},
      // 从右到左弹窗
      drawer: false,
      formData: {
        userName: undefined,
        addUser: undefined,
      },
      rules: {
        userName: [
          {
            required: true,
            message: "请输入用户组名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.getparam();
    this.getData();
  },
  methods: {
    //获取项目列表
    async getProjectButton() {
      const data = await selectProjectByUserId({
        ugId: this.$route.query.ugId - 0,
      });
      console.log(data, "获取项目列表66666699999");
      if (data.code == 200) {
        if (data.data.length > 0) {
          data.data.forEach((item) => {
            if (item.three == "1") {
              item.three = true;
            } else {
              item.three = false;
            }
          });
          this.tableData = data.data;
        } else {
          this.tableData = [];
        }
        this.drawer = true;
      } else {
        this.$message.error(data.msg);
      }
    },
    async getData() {
      this.inputShow=this.$route.query.inputShow-0;
      this.formData.userName = this.$route.query.ugName;
      const arrList = JSON.parse(sessionStorage.getItem("BindProId"));
      console.log(arrList, "66677");
      this.dynamicTags = arrList;
    },
    async getData2() {
      const param2 = JSON.parse(localStorage.param);
      const paramCode = JSON.parse(localStorage.code);
      console.log(param2, "222");
      if (paramCode) {
        this.headName = "编辑";
      } else {
        this.headName = "新增";
      }
      let param = {
        nickName: this.queryParams.nickName,
        userName: this.queryParams.userName,
        ugId: param2.ugId,
      };
      console.log(param, "搜索数据");
      const data = await selectUserGroupRelaList(param);
      console.log(data, "获取数据");
      if (data.code == 200) {
        this.tableData = data.data.groupRelaList;
        this.formData.userName = param2.ugName;
      }

      // 查询已经是是true的人数并显示出来
      const pxData = data.data.groupRelaList.filter(
        (item) => item.flag == true
      );
      this.dynamicTags = pxData;
    },
    checkShow(rows) {
      console.log(rows, "2222");

      if (this.checkBox == 0) {
        this.tableData.map((row) => {
          row.three = true;
        });
        this.checkBox = 1;
      } else {
        this.tableData.map((row) => {
          row.three = false;
        });
        this.checkBox = 0;
      }
    },

    // 提交按钮
    submitForm() {
      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) {
        } else {
          // console.log(this.dynamicTags, "添加的人数");
          // console.log(this.formData.userName, "用户组名称");
          // const code = localStorage.getItem("code");
          // console.log(code, "0是新增1是编辑");
          // const userId = this.dynamicTags.map((item) => item.userId);
        
         this.dynamicTags.forEach(item=>{
            item.ugId=this.$route.query.ugId - 0
         });
          let param = {
            ugId: this.$route.query.ugId - 0,
            data:this.dynamicTags
          };
          console.log(param,'后端传递数据')
          const data = await addProjectByUserGroup(param);
           if (data.code = 200) {
                this.$message({
                  type: "success",
                  message: "操作成功！",
                });
                this.formData.userName = "";
                this.dynamicTags = [];
                this.$router.push("/base/userGroup");
              } else {
                this.$message.error(data.msg);
              };
    console.log(data,'jieguo');
        }

        // TODO 提交表单
      });
    },
    //   ..弹窗数据选择和取消获取数据
    handleSelectionChange(val) {
      console.log(this.val, "全部选中");
      // this.multipleSelection = val;
      //  console.log(this.tableData,'全部选中')
    },
    //   确定添加人员按钮
    toggleSelection() {
      // console.log(this.multipleSelection,'确定添加按钮');
      console.log(this.tableData, "确定添加按钮");
      const data = this.tableData.filter((item) => item.three == true);
      console.log(data, "2222");
      this.dynamicTags = data;
      this.drawer = false; //点击确定添加以后就关闭弹窗
    },
    //   删除人数函数
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style scoped>
/* 弹窗屏幕居中 */
 ::v-deep .el-dialog__wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.xhxBox {
  height: 5px;
  border-top: 1px #eee solid;
  margin: 8px 0px 20px 0px;
}
</style>

<style>
.project-permission {
  margin: 15px;
}

.project-permission .el-card__body {
  min-height: 800px;
}

.project-permission .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
  border: none;
}

.project-permission .form {
  width: 800px;
  margin: auto;
}

.project-permission .form .el-form .row {
  display: flex;
}

.project-permission .form .el-form .row .el-form-item:first-child {
  margin-right: 100px;
}

.project-permission .form .el-form .row .el-radio-group {
  margin-left: 20px;
}

.project-permission .form .el-form {
  margin: auto;
}

.project-permission .form .el-form .button {
  margin: auto;
  text-align: center;
}

.project-permission .el-divider--horizontal {
  background: #f0f0f0;
}

.project-permission .form .group {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  /* border: 1px red solid; */
}

.project-permission .form .group .group-item {
  display: flex;
  align-items: center;
  background: #e8f4ff;
  margin-right: 15px;
  /* height: 20px; */
  height: 30px;
  color: #4f86f7;
  font-size: 10px;
  margin-bottom: 15px;
  padding: 10px 5px;
  border-radius: 3px;
  border: 1px solid #e8f4ff;
}

.project-permission .el-dialog__headerbtn .el-dialog__close {
  color: #a39b9f;
  font-size: 25px;
}

.project-permission .el-dialog {
  border-radius: 5px;
}

.project-permission .el-dialog .el-dialog__header {
  border-bottom: 1px solid #eeeeee;
  width: 90%;
  margin: auto;
  padding-left: 0;
}

.project-permission .el-dialog__body {
  padding-left: 26px;
}

.project-permission .el-checkbox__input .el-checkbox__inner {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.project-permission .unselected.el-checkbox__input .el-checkbox__inner::before {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 1px;
  left: -2px;
  position: absolute;
  top: 7px;
  width: 20px;
}

.project-permission .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: white;
}

.project-permission .el-checkbox__input .el-checkbox__inner::after {
  border: 1px solid #fff;
  box-sizing: content-box;
  content: "";
  border-left: 0;
  border-top: 0;
  height: 10px;
  left: 7px;
  position: absolute;
  top: 2px;
  width: 4px;
  transform: rotate(45deg) scaleY(1);
}
</style>
